<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <input type="text" />
  <script>

    function debounce(fn, duration) {
      var timerId = null
      // console.log("我是windows的this",this);

      return function () {
        console.log("我是input的this", this);
        var that = this


        console.log('arguments', Array.prototype.slice.call(arguments, 0));

        var args = Array.prototype.slice.call(arguments, 0)
        //清楚上一次的定时
        clearTimeout(timerId)

        timerId = setTimeout(function () {
          fn.apply(that, args)
        }, duration)

      }

    }


    //newHandler执行debounce（），得到返回结果
    var newHandler = debounce(function (e) {
      console.log('用户有按键', this.value, e);
    }, 500)

    var inp = document.querySelector('input');
    inp.addEventListener('input', newHandler);











    // var mouseMoveHandler = debounce(function () {
    //   console.log('move');
    // }, 1000);

    // window.addEventListener('mousemove', mouseMoveHandler);
  </script>
</body>

</html>